import { FilterOutlined, DownOutlined, RedoOutlined, DoubleRightOutlined } from "@ant-design/icons";
import { Button, Card, Form } from "antd";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import ItemCard from "./components/ItemCard";

// import type { FormProps, FormInstance } from 'antd';
import type { FilterCardType, FieldType, FilterCardRefType } from "./types/index.type";

import "./index.scss";
import React from "react";

const FilterCard = forwardRef<FilterCardRefType, FilterCardType>((props, ref) => {
  const { className, filterFormList } = props;
  const formContentRef = useRef<HTMLParagraphElement>(null);
  const [isExpand, setExpand] = useState(false);
  const [formDomHeight, setFormDomHeight] = useState<string>("48px");
  // const filterFormRef = useRef<FormInstance>(null);
  // 通过 Form.useForm 对表单数据域进行交互 相当于 useRef<FormInstance>(null) 进行控制
  const [filterFormRef] = Form.useForm();
  const [isShowExpandBtn, setShowExpandBtn] = useState(true);
  // * 立即查询
  const onFinish = () => {
    // const value = filterFormRef.getFieldsValue();
    const value = filterFormRef.getFieldsValue(true); // 过滤掉无值的字段
    props.onFinish(value);
    // filterFormRef.submit(); // 与点击 submit 按钮效果相同，会走 onFinish 方法
  };
  // * 重置
  const onReset = () => {
    filterFormRef.resetFields();
    props.onReset();
  };
  // * 获取元素实际高度
  const getFormHeight = () => {
    const contentHeight = formContentRef.current?.offsetHeight ?? 0;
    return contentHeight;
  };
  // * 展开和收起
  const onExpandAndCollapse = () => {
    setExpand(isExpand => !isExpand); // 使用函数形式确保拿到最新状态
    const contentHeight = getFormHeight();
    const newHeight = isExpand ? "48px" : `${contentHeight}px`;
    setFormDomHeight(newHeight);
  };
  // * 暴露给父组件的属性
  useImperativeHandle(ref, () => ({ onReset }));

  useEffect(() => {
    const contentHeight = getFormHeight();
    setShowExpandBtn(contentHeight > 48);
  }, []);
  return (
    <>
      <Card className={`${className} relative`}>
        {/*  */}
        <div className="flex justify-between">
          <div className="flex items-center">
            <FilterOutlined className="text-primary-color text-18" />
            <span className="text-color-title mx-4">请选择筛选条件</span>
            <DownOutlined
              className="cursor-pointer transition-all duration-200"
              style={{ transform: `rotate(${isExpand ? 0 : 180}deg)` }}
              onClick={onExpandAndCollapse}
            />
          </div>
          <div>
            <Button icon={<RedoOutlined rotate={-80} />} onClick={onReset}>
              重置
            </Button>
            <Button type="primary" className="bg-primary-color ml-8" onClick={onFinish}>
              点击查询
            </Button>
          </div>
        </div>
        {/*  */}
        <div className="overflow-hidden transition-all duration-200" style={{ height: formDomHeight }}>
          <div ref={formContentRef}>
            <Form
              form={filterFormRef}
              className="w-full"
              name="filterForm"
              layout="inline"
              labelAlign="right"
              labelCol={{ flex: "100px" }}
              wrapperCol={{ flex: 1 }}
            >
              {filterFormList.map((item, index) => {
                const { name, label, type, ...rest } = item;
                return (
                  <Form.Item<FieldType>
                    label={label}
                    name={name}
                    key={index}
                    className="mt-16 !mr-0  w-[18%] xl:w-[25%] 2xl:w-[20%]"
                  >
                    <ItemCard type={type} {...rest} />
                  </Form.Item>
                );
              })}
            </Form>
          </div>
        </div>
        {isShowExpandBtn && (
          <div className="expand_more" onClick={onExpandAndCollapse}>
            {isExpand ? "收起更多" : "展开更多"}
            <DoubleRightOutlined
              className="transition-all duration-300"
              style={{ transform: `rotate(${isExpand ? 90 : 270}deg)` }}
            />
          </div>
        )}
      </Card>
      {/* 为 expand_more div进行占位 */}
      {isShowExpandBtn && <div className="h-14"></div>}
    </>
  );
});

export default React.memo(FilterCard);
